<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true, isOpacity: false }">
    <view :class="[`${prefixCls}-benefits-list-container`]" :style="{ height: `calc(100vh - ${$Platform.navbar}px)` }">
      <view v-if="showCont">
        <view v-for="(item, index) in price" :key="index">
          <!-- 毕业生优惠权益卡片 -->
          <view
            class="item"
            :style="{
              'background-image': 'url(' + item.card_image + '?x-oss-process=image/resize,m_fixed,w_654,h_368)',
              'background-repeat': 'no-repeat',
              'background-size': 'contain',
            }"
            v-if="showCont && item.card_image"
          >
            <view class="item-content">
              <view class="item-limitdate">有效期至{{ item.valid_date }}</view>
            </view>
            <view class="item-msg">
              <view class="item-customer">{{ item.name }} {{ item.card_num }}</view>
              <view class="item-detail-btn" @click="showDiscountDetail(item)">权益详情 ></view>
            </view>
            <view class="item-mask" v-if="item.status == 2 || item.status == 3 || item.status == 4">
              <view :class="{ 'used-icon': item.status == 2, 'overdue-icon': item.status == 3, 'canceled-icon': item.status == 4 }"></view>
            </view>
          </view>
        </view>
      </view>
      <cu-empty mode="list" text="暂无权益" v-else> </cu-empty>
      <benefitsMsg ref="benefitsMsgPopup" :ruleInfo="benefitsDetails" />
    </view>
  </cu-layout>
</template>
<script>
import { getListNew } from './api'
import benefitsMsg from './components/benefits-msg.vue'
import { isEmpty } from '@/common/helper/is'
export default {
  name: 'benefitsList',
  components: { benefitsMsg },
  props: {},
  data() {
    return {
      benefitsDetails: {
        title: '权益详情',
        content: '',
      },
      showCont: true,
      price: [
        // {
        //   id: '3a185c98-fbbd-e7f2-a34f-7af1116ba946',
        //   type: 'graduate',
        //   subtype: null,
        //   type_index: 'graduate',
        //   title: '2025毕业生专属权益',
        //   customer_id: 'B732900D-B46A-0874-2EFE-C4D81D5E5000',
        //   name: '倪聪',
        //   project_id: '',
        //   status: 3,
        //   qr_code: null,
        //   amount: null,
        //   cnt_living_days: null,
        //   title_show1: '毕业生优惠2025',
        //   title_show2: '毕业生专属权益',
        //   card_num: '36**************89',
        //   valid_date: '2024-12-31',
        //   cnt_living_time: '',
        //   business_id: '3a0fef02-9230-f3c3-9066-cf21a238f81b',
        //   describe: '1、若客户因为租到安住旗下其他租赁房源而提前退房，则不收原房间违约金;\n2、专属9折优惠(可与开业折扣活动叠加，但不与开业免租、其他专属身份权益叠加)。',
        //   card_image: 'https://szct-oss.inboyu.com/marketing_activity/3a1862ee-f655-c0a4-fae2-6d00a2b7d57b.png',
        // },
      ],
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {},
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  async onLoad(options) {
    console.log('🚀 ~ onLoad benefitsList~ options:', options)
    // 获取权益列表
    // this.$refs.benefitsMsgPopup.open()
    this.getListNew()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},

  methods: {
    async getListNew() {
      let { data } = await getListNew()
      this.price = data
      this.showCont = !isEmpty(this.price)
    },
    showDiscountDetail(item) {
      this.$refs.benefitsMsgPopup.open()
      this.benefitsDetails.content = item.describe || item.rule
      this.benefitsDetails.title = '权益详情'
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: #ffffff !important;
}
.#{prefixCls('benefits-list-container')} {
  position: relative;
  box-sizing: border-box;
  background: #ffffff;
  padding: 50rpx;
  .item {
    position: relative;
    height: 388rpx;
    margin: 0 auto;
    display: flex;
    border-radius: 24rpx;
    justify-content: center;
    align-items: center;
    margin-bottom: 30rpx;
    background: #{cdn('/customer/static/images/benefits/graduation_benefits_card.png')} no-repeat;
    background-size: contain;
    .item-content {
      position: absolute;
      width: 100%;
      height: calc(100% - 88rpx);
      top: 0;
      left: 0;
      box-sizing: border-box;
      padding: 30rpx;
      color: #fff;
      .item-limitdate {
        margin-top: 124rpx;
        font-size: 24rpx;
      }
    }
    .item-detail-btn {
      width: 182rpx;
      height: 56rpx;
      line-height: 56rpx;
      color: #3777c7 !important;
      font-size: 26rpx;
      text-align: center;
      background: #fff;
      border-radius: 24rpx;
      font-weight: 500;
      margin-top: 30rpx;
    }
    .item-msg {
      z-index: 10;
      color: #fff;
      line-height: 1;
      position: absolute;
      top: 210rpx;
      left: 0;
      width: 100%;
      height: 88rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
      font-size: 26rpx;
    }
  }
}
.item-mask {
  position: absolute;
  top: 20rpx;
  left: 0;
  z-index: 10;
  width: 100%;
  height: calc(100% - 40rpx);
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.used-icon {
  width: 186rpx;
  height: 186rpx;
  background: #{cdn('/customer/static/images/benefits/used.png')} no-repeat center;
  background-size: contain;
}
.overdue-icon {
  width: 186rpx;
  height: 186rpx;
  background: #{cdn('/customer/static/images/benefits/overdue.png')} no-repeat center;
  background-size: contain;
}
.canceled-icon {
  width: 186rpx;
  height: 186rpx;
  background: #{cdn('/customer/static/images/benefits/icon_cancel.png')} no-repeat center;
  background-size: contain;
}
</style>
